<template>
  <div>
    <!-- <div>
      jack:{{ count }}
    </div> -->
    <!-- 访问getters方法一：👇 -->
    <!-- <div>{{ $store.getters.showJackCount }}</div> -->

    <!-- 3、使用批量计算属性👇 -->
    <!-- <div>jack:{{ jackCount }}  beta:{{ betaCount }}</div> -->

    <!-- 访问getters方法二：👇 -->
    <!-- <div>{{ showJackCount }}</div> -->
    <button @click="add">+1</button>
  </div>
</template>

<script>
import bus from '../../../utils/eventBus.js'
import { mapState, mapActions, mapMutations } from 'vuex'// 1、提供映射方法
export default {
  data() {
    return {
      // count: 0
    }
  },
  computed: {
    // 访问state方法一：
    // count() {
    //   return this.$store.state.jackCount
    // }

    // 访问state方法二：
    ...mapState(['jackCount', 'betaCount']) // 2、批量生成计算属性
    // 等效于👇
    // jeckCount () {
    //   return this.$store.state.jackCount
    // }
    // 和
    // betaCount () {
    //   return this.$store.state.betaCount
    // }

    // 访问getters方法二：👇
    // ...mapGetters(['showJackCount'])
  },
  mounted() {
    bus.$on('add-beta', (data) => {
      this.count += data
    })
  },
  methods: {
    // 获取mutation方法二（同步和异步）👇：
    ...mapMutations(['addJack']),
    ...mapActions(['addJackSync']),
    add() {
      // bus.$emit('add-jack', 1)
      // 可以直接修改公共数据，不推荐违反vuex单向数据流的规定
      // this.$store.state.jackCount += 1

      // 获取mutation方法一（同步）👇：
      // this.$store.commit('addJack', 1)
      // 异步：
      // this.$store.dispatch('addJackSync', 1)// 延迟3秒出结果

      // 方法二调用：
      this.addJackSync(1)
    }
  }

}
</script>

<style>

</style>
